<!--
 * @Description: 项目经理月报评价审批详情页
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2022-04-07 16:53:10
 * @LastEditTime: 2022-04-20 09:52:17
 * @FilePath: \cscec-pms-admin\src\views\project\projectManagerMonthlyReportEvaluate\audit.vue
-->
<template>
  <div>
    <template v-if="info.taskDefKey">
      <base-audit
        :callback-fn="callbackFn"
        :before-submit-fn="beforeSubmitFn"
        :is-need-details="false"
        :button-config="buttonConfig"
      />
      <!-- 评价 -->
      <a-card
        v-if="['controlledCompanyDepartment','companyDepartment'].includes(type)"
        style="padding:20px"
      >
        <p class="title">
          评价
        </p>
        <a-table
          ref="table"
          :columns="columns2"
          :data-source="tableData"
          :pagination="false"
          bordered
          row-key="id"
          :loading="loading"
        >
          <template
            slot="opinion"
            slot-scope="text,record"
          >
            <BaseInput
              v-if="record.ifScore === '1'"
              v-model="record.opinion"
              :max-length="300"
              placeholder="请输入意见"
              class="input"
            />
            <span v-else>{{ record.opinion }}</span>
          </template>
          <template
            slot="evaluationScore"
            slot-scope="text,record"
          >
            <a-select
              v-if="record.ifScore === '1'"
              v-model="record.evaluationScore"
              placeholder="请选择得分"
              class="width-100 input"
            >
              <a-select-option
                v-for="{value,label} in score"
                :key="value"
                :value="value"
              >
                {{ label }}
              </a-select-option>
            </a-select>
            <span v-else>{{ record.evaluationScore }}</span>
          </template>
        </a-table>
      </a-card>
      <!-- 评价 -->
      <!-- 详情页 -->
      <a-card style="padding:20px">
        <template v-if="type === 'controlledCompanyDepartment'">
          <p class="title">
            项目经理月报
          </p>
          <ProjectManagerMonthlyReportView
            :data="data"
            :is-audit="true"
          />
        </template>
        <template v-else>
          <a-tabs v-model="tabKey">
            <a-tab-pane
              v-for="{key,tab} in tabs[type]"
              :key="key"
              :tab="tab"
            />
          </a-tabs>
          <ProjectManagerMonthlyReportView
            v-if="tabKey === '1'"
            :data="data"
            :is-audit="true"
          />
          <a-table
            v-if="tabKey === '2' || tabKey === '3'"
            ref="table"
            :columns="columns1"
            :data-source="tabKey === '2' ? branchComEvaluation : tabKey === '3' ? companyEvaluation : []"
            :pagination="false"
            bordered
            row-key="id"
          />
        </template>
      </a-card>
      <!-- 详情页 -->
    </template>
    <template v-else>
      <h1>业务详情</h1>
      <a-card style="padding:20px">
        <a-tabs v-model="tabKey">
          <a-tab-pane
            v-for="{key,tab} in tabs.companyEngineer"
            :key="key"
            :tab="tab"
          />
        </a-tabs>
        <ProjectManagerMonthlyReportView
          v-if="tabKey === '1'"
          :data="data"
          :is-audit="true"
        />
        <a-table
          v-if="tabKey === '2' || tabKey === '3'"
          ref="table"
          :columns="columns1"
          :data-source="tabKey === '2' ? branchComEvaluation : tabKey === '3' ? companyEvaluation : []"
          :pagination="false"
          bordered
          row-key="id"
        />
      </a-card>
    </template>
  </div>
</template>
<script>
import BaseAudit from '@/views/matters/approval/components/BaseAudit.vue'
import { columns2, taskDefKey, score } from './model.js'
import { columns1 } from './model.js'
import { audit } from '@/api/project/projectManagerMonthlyReportEvaluate'
import ProjectManagerMonthlyReportView from '../projectManagerMonthlyReport/projectManagerMonthlyReportView'
export default {
  name: 'projectManagerMonthlyReportEvaluateAudit' + Date.now(),
  components: {
    BaseAudit,
    ProjectManagerMonthlyReportView
  },
  data() {
    return {
      // 评价表头
      columns2,
      // 接口数据
      data: {},
      // 评价表数据
      tableData: [],
      // 加载
      loading: false,
      // 得分下拉
      score,
      // 页面分类
      type: '',
      // 审批按钮
      buttonConfig: {},
      // 标签页显示项
      tabKey: '1',
      // 标签
      tabs: {
        // 分公司各总工
        controlledCompanyEngineer: [
          {
            key: '1',
            tab: '项目经理月报'
          },
          {
            key: '2',
            tab: '分公司评价信息'
          }
        ],
        // 公司各部门
        companyDepartment: [
          {
            key: '1',
            tab: '项目经理月报'
          },
          {
            key: '2',
            tab: '分公司评价信息'
          }
        ],
        // 公司各总工
        companyEngineer: [
          {
            key: '1',
            tab: '项目经理月报'
          },
          {
            key: '2',
            tab: '分公司评价信息'
          },
          {
            key: '3',
            tab: '公司评价信息'
          }
        ]
      },
      // 其他评价表头
      columns1,
      // 分公司评价表数据
      branchComEvaluation: [],
      // 公司评价表数据
      companyEvaluation: []
    }
  },
  computed: {
    // 地址携带信息
    info() {
      return this.$route.query
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    /**
     * @description: 获取数据
     * @param {void}
     * @return {void}
     */
    async getData() {
      try {
        this.loading = true
        const { data } = await audit.queryMonthlyReportEvaluationApprovalDetail(this.info.businessId)
        this.data = data.reportDetailVO
        switch (taskDefKey.find((el) => el.key === this.info.taskDefKey)?.type) {
          // 分公司各部门
          case 'controlledCompanyDepartment': {
            this.type = 'controlledCompanyDepartment'
            this.buttonConfig = {
              no: {
                isShow: false,
                title: '审批不通过'
              },
              ok: {
                isShow: true,
                title: '审批'
              }
            }
            // 评价表，优化一下得分的placeholder
            this.tableData = data.branchComEvaluation.map((el) => {
              if (el.evaluationScore === null) {
                return {
                  ...el,
                  evaluationScore: void 0
                }
              } else {
                return el
              }
            })
            break
          }
          // 分公司各总工
          case 'controlledCompanyEngineer': {
            this.type = 'controlledCompanyEngineer'
            this.buttonConfig = {
              no: {
                isShow: true,
                title: '审批不通过'
              },
              ok: {
                isShow: true,
                title: '审批通过'
              }
            }
            // 评价表，优化一下得分的placeholder
            this.tableData = data.branchComEvaluation.map((el) => {
              if (el.evaluationScore === null) {
                return {
                  ...el,
                  evaluationScore: void 0
                }
              } else {
                return el
              }
            })
            // 分公司评价
            this.branchComEvaluation = data.branchComEvaluation
            break
          }
          // 公司各部门
          case 'companyDepartment': {
            this.type = 'companyDepartment'
            this.buttonConfig = {
              no: {
                isShow: false,
                title: '审批不通过'
              },
              ok: {
                isShow: true,
                title: '审批'
              }
            }
            // 评价表，优化一下得分的placeholder
            this.tableData = data.companyEvaluation.map((el) => {
              if (el.evaluationScore === null) {
                return {
                  ...el,
                  evaluationScore: void 0
                }
              } else {
                return el
              }
            })
            // 分公司评价
            this.branchComEvaluation = data.branchComEvaluation
            break
          }
          // 公司各总工
          case 'companyEngineer': {
            this.type = 'companyEngineer'
            this.buttonConfig = {
              no: {
                isShow: true,
                title: '审批不通过'
              },
              ok: {
                isShow: true,
                title: '审批通过'
              }
            }
            // 评价表，优化一下得分的placeholder
            this.tableData = data.companyEvaluation.map((el) => {
              if (el.evaluationScore === null) {
                return {
                  ...el,
                  evaluationScore: void 0
                }
              } else {
                return el
              }
            })
            // 分公司评价
            this.branchComEvaluation = data.branchComEvaluation
            // 公司评价
            this.companyEvaluation = data.companyEvaluation
            break
          }
          default: {
            // 分公司评价
            this.branchComEvaluation = data.branchComEvaluation
            // 公司评价
            this.companyEvaluation = data.companyEvaluation
          }
        }
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    },
    /**
     * @description: 评价表格校验
     * @param {array} data 校验数据
     * @param {array} required 必填项
     * @return {boolean} 是否通过校验
     */
    verify(data, required) {
      return !data.some((el) => {
        for (let item in required) {
          if ((el[required[item]] ?? '') === '') {
            return true
          }
        }
      })
    },
    /**
     * @description: 提交审批前校验
     * @param {string} type 拒绝/通过 approval/unApproval
     * @return {boolean} 阻断返回false，通过返回true
     */
    callbackFn(type) {
      // 总工不做校验
      if (['controlledCompanyEngineer', 'companyEngineer'].includes(this.type)) return true
      // 通过
      if (type === 'approval') {
        // 校验评价表
        if (
          this.verify(
            this.tableData.filter((el) => el.ifScore === '1'),
            ['opinion', 'evaluationScore']
          )
        ) {
          return true
        } else {
          this.$confirm({
            title: '温馨提示',
            content: '请填写完整评价信息'
          })
          return false
        }
      } else {
        // 拒绝不做处理
        return true
      }
    },
    /**
     * @description: 提交审批之前的接口
     * @param {object} e 是否同意
     * @return {promise} 接口
     */
    beforeSubmitFn(e) {
      if (e.agree) {
        // 总工不保存分数
        if (['controlledCompanyEngineer', 'companyEngineer'].includes(this.type)) {
          return new Promise((resolve) => {
            resolve(true)
          })
        } else {
          return audit.evaluationScore(
            this.tableData
              .filter((el) => el.ifScore === '1')
              .map(({ evaluationScore, id, opinion }) => {
                return {
                  evaluationScore,
                  id,
                  opinion
                }
              })
          )
        }
      } else {
        return new Promise((resolve) => {
          resolve(true)
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
.title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}
@{deep}.input {
  .ant-input,
  .ant-input-number,
  .ant-select-selection {
    border-color: #e4ac0b;
    background-color: #fff9e8;
  }
}
.width-100 {
  width: 100%;
}
@{deep}.breadcrumb-wrapper {
  display: none;
}
</style>
